<template>
	<view class="recharge-page">
		<navigation :navigationMsg="navigationMsg"></navigation>
		<view class="main">
			<view class="manner">
				<view class="title">
					充值方式
				</view>
				<view class="manner-box">
					<view class="logo">

					</view>
					<view class="text">
						<view class="p1">
							支付宝
						</view>
						<!-- 	<view class="p2">
							单笔限额30-10000元
						</view> -->
					</view>
				</view>
			</view>
			<view class="top-up-amount">
				<view class="title">
					充值金额
				</view>
				<view class="input-amoumt">
					<view class="money-logo">￥</view>
					<view class="input-box">
						<input class="input" v-model="balanceNum" placeholder="请输入充值金额" type="text">
					</view>
					<view class="balance">余额：<span>￥{{userInfo.money}}</span></view>
				</view>
				<view class="money-list">
					<view :class="balanceIndex==index?'active list-item':'list-item'" v-for="(item,index) in moneyList"
						:key="index" @click="changeMoney(item,index)">
						{{item.money}}元
					</view>
				</view>
			</view>
			<view class="error-box">
				<view class="title">
					充值说明：
				</view>
				<!-- 	<view class="p1">
					1.最低充值金额30元
				</view> -->
				<view class="p2">
					1.当前只支持支付宝充值
				</view>
				<view class="p3">
					2.充值货币可购买商城饰品
				</view>
			</view>
			<u-button :loading="rechargeLoading" :disabled="rechargeBtn" class="recharge-btn" type="primary"
				:text="rechargeText" @click="submit"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from '@/api/index.js'
	import navigation from '../../../../components/navigation.vue';
	export default {
		data() {
			return {
				navigationMsg: {
					title: "充值"
				},
				moneyList: [{
					money: 100
				}, {
					money: 200
				}, {
					money: 500
				}, {
					money: 1000
				}, {
					money: 2000
				}, {
					money: 5000
				}],
				//充值金额
				balanceNum: "",
				//选中金额下标
				balanceIndex: -1,
				//用户信息
				userInfo: {},
				//充值按钮
				rechargeBtn: false,
				rechargeText: "确定",
				rechargeLoading: false,
				//背景色
				bgColor: "#fff",
				//文本色
				textColor: "#2A2D2E"
			}
		},
		components: {
			navigation
		},
		onShow() {
			this.getUserInfo()
			this.getSetting()
		},
		methods: {
			//获取网站配置
			getSetting() {
				http.post('/api/index/getSetting').then(res => {
					document.documentElement.style.setProperty('--bg-color', res.theme_color);
					document.documentElement.style.setProperty('--text-color', res.font_color);
				}).catch(err => {
					console.log(err);
				})
			},
			//获取会员资料
			getUserInfo() {
				http.post('/api/account/getUserInfo').then(res => {
					this.userInfo = res;
				}).catch(err => {

				})
			},
			//确认充值
			submit() {
				if (this.balanceNum == "") {
					uni.showToast({
						title: "请选择充值金额",
						icon: "none",
						duration: 1000
					})
				} else {
					this.rechargeText = "正在充值"
					this.rechargeBtn = true
					this.rechargeLoading = true
					this.createRechargeIn(this.balanceNum)
				}
			},
			//创建充值订单
			createRechargeIn(money) {
				http.post('/api/recharge/rechargeIn', {
					money: money
				}).then(res => {
					uni.showLoading({
						title: "正在充值"
					})
					window.location.href = res.url
					this.rechargeText = "确定"
					this.rechargeBtn = false
					this.rechargeLoading = false
				}).catch(err => {


				})
			},
			//支付订单
			rechargePay(orderId) {
				http.post('/api/recharge/rechargePay', {
					recharge_id: orderId
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: "充值成功",
						icon: "none",
						duration: 1000
					})
					setTimeout(() => {
						location.reload()
					}, 1000)
				}).catch(err => {
					console.log(err);
				})
			},
			//选择充值金额
			changeMoney(item, index) {
				this.balanceIndex = index
				this.balanceNum = item.money
			}
		}
	}
</script>

<style lang="scss" scoped>
	:root {
		--bg-color: ;
		--text-color: ;
	}

	.recharge-page {
		width: 100%;
		height: 100vh;
		background-color: var(--bg-color);

		.main {
			width: 100%;
			height: calc(100% - 100rpx);
			color: var(--text-color);

			.manner {
				width: 100%;
				height: 180rpx;
				background-color: white;
				margin-top: 30rpx;
				background-color: var(--bg-color);

				>.title {
					width: 100%;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 34rpx;
					padding-left: 20rpx;
					font-weight: bold;
				}

				.manner-box {
					width: 100%;
					height: 120rpx;
					display: flex;
					align-items: center;

					.logo {
						width: 60rpx;
						height: 60rpx;
						background-image: url("../../../../static/my/wallet/recharge/alipay.svg");
						background-size: contain;
						background-position: center;
						background-repeat: no-repeat;
						margin-left: 20rpx;
						margin-right: 20rpx;
					}

					.text {
						.p1 {
							font-size: 30rpx;
						}

						.p2 {
							font-size: 26rpx;
							color: #bababa;
						}
					}
				}
			}

			.top-up-amount {
				width: 100%;
				height: 480rpx;
				background-color: white;
				margin-top: 30rpx;
				background-color: var(--bg-color);

				.title {
					width: 100%;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 34rpx;
					padding-left: 20rpx;
					font-weight: bold;
				}

				.input-amoumt {
					width: 95%;
					height: 120rpx;
					margin: auto;
					margin-top: 10rpx;
					display: flex;
					align-items: center;

					.money-logo {
						width: 60rpx;
						height: 100%;
						font-size: 50rpx;
						line-height: 120rpx;
						text-align: center;
					}

					.input-box {
						width: 400rpx;
						height: 100%;

						.input {
							height: 120rpx;
							font-size: 50rpx;
							line-height: 120rpx;
						}
					}

					.balance {
						padding-left: 10rpx;
						white-space: nowrap;

						>span {
							color: #61cdb6;
						}
					}
				}

				.money-list {
					width: 95%;
					height: 280rpx;
					margin: auto;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					align-items: center;

					.list-item {
						width: 30%;
						height: 100rpx;
						border: 1px solid #ccc;
						text-align: center;
						line-height: 100rpx;
						font-size: 36rpx;
					}

					>.active {
						border: 2px solid #61cdb6;
					}
				}
			}

			.error-box {
				width: 95%;
				height: 200rpx;
				margin: auto;
				margin-top: 20rpx;

				.title {
					font-size: 34rpx;
					font-weight: bold;
				}

				.p1,
				.p2,
				.p3 {
					font-size: 26rpx;
					color: #bababa;
					margin-top: 10rpx;
				}
			}

			.recharge-btn {
				width: 85%;
				height: 80rpx;
				border-radius: 50rpx;
				background-color: #2f3043;
				margin-top: 490rpx;
			}
		}
	}
</style>